﻿$(function () {
    $personImage = $('#personImage');
    $personImage.lgbUploadFile();//上传图片控件
    $(' div.logoImage').addClass('input-group');
    var $echartsModal = $("#echartsModal");

    var selYear = 0;//选中的年份
    var selMonth = 0;//选中的月份

    var level = 1;//标志位

    var yearFresh;
    var monthFresh;
    var dayFresh;

    var option = {
        title: {
            text: '实验实例',
            x: 'center',
            y: 20
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            x: 'left',
            y: 'top',
            borderwidth: 1,
            data: ['数量']
        },
        grid: {
            x: 100,
            y: 100,
        },
        toolbox: {
            show: true,
            x: 'right',
            y: 'top',
            feature: {
                mark: {
                    show: true,
                    title: {
                        mark: '辅助线开关',
                        markUndo: '删除辅助线',
                        markClear: '清空辅助线',
                    },
                },
                dataZoom: {
                    show: true,
                    title: {
                        dataZoom: '区域缩放',
                        dataZoomReset: '区域缩放后退',
                    },
                },
                magicType: {
                    show: true,
                    title: {
                        line: '折线图切换',
                        bar: '柱形图切换',
                    },
                    type: ['line', 'bar'],
                },
                restore: {
                    show: true,
                    title: '还原',
                },
            }
        },
        xAxis: {
            name: '',
            data: []
        },
        yAxis: {},
        series: [{
            name: '数量',
            type: 'bar',
            itemStyle: {
                normal: {
                    lable: {
                        show: true,
                        position: 'top',

                    }
                }
            },
            data: []
        }]
    };



    var bsa = new BootstrapAdmin({
        url: PersonManage.url,
        dataEntity: new DataEntity({
            map: {
                ID: "personId",
                PersonName: "personName",
                PersonSex: "personSex",
                PersonAge: "personAge",
                PersonMajor: "personMajor",
                PersonImg: "personImage"
            }
        }),
        callback: function (data) {
            if (data.oper === 'create') {
                $('#personName').prop('readonly', false).removeClass("ignore");
                temp = 'create';
            }
            else if (data.oper === 'edit') {
                $('#personName').prop('readonly', true).addClass("ignore");
                temp = 'edit';
                //头像
                if (data.data.PersonImg != "") {
                    $personImage.attr('src', data.data.PersonImg);
                    $personImage.attr('data-file', data.data.PersonImg.substring(data.data.PersonImg.lastIndexOf('/') + 1));//通过图片文件名来获取图片
                    $('.logoImage').addClass('open');
                }
                //处理日期的显示问题
                var personAge = data.data.PersonAge.substring(0, 10);
                $('#personAge').val(personAge);
            }
            else if (data.oper === 'save') {
                $('#txt_expert_name').val('');
                $('table').bootstrapTable('refresh');
            }
        }
    });

    //关闭模态框事件
    $('#dialogNew').on('hide.bs.modal', function () {
        $personImage.attr('src', "");
        $personImage.attr('data-file', "");
        $('.logoImage').removeClass('open');
    });


    //表格数据加载
    $('table').smartTable({
        url: PersonManage.url,
        sortName: 'PersonName',
        queryParams: function (params) { return $.extend(params, { Name: $('#txt_expert_name').val() }); },
        columns: [{ checkbox: true },
            { title: "专家Id", field: "ID", events: bsa.idEvents(), formatter: BootstrapAdmin.idFormatter },
            { title: "学生姓名", field: "PersonName", sortable: true },
            { title: "性别", field: "PersonSex", sortable: false, formatter: function (value, row, index) { return (value || value == "true") ? "男" : "女"; } },
            { title: "年龄", field: "PersonAge", sortable: false, formatter: function (value, row, index) { return new Date().getFullYear() - new Date(value).getFullYear(); } },
            { title: "专业", field: "PersonMajor", sortable: false },
            { title: "头像", field: "PersonImg", align: 'center', sortable: false, formatter: function (value, row, index) { return '<img class="epIcon" src="' + value + '"/>' } }
        ]
    });

    //重置按钮
    $('#reset').on('click', function () {
        $('#txt_expert_name').val("");
        $('table').bootstrapTable('refreshOptions', { pageNumber: 1 });
    });

    //显示图表按钮点击事件
    $('#buttonEcharts').on('click', function () {
        $echartsModal.modal("show");
        selectAlldata();
        yearFresh = setInterval(function () { selectAlldata(); }, 4000);
    });

    //1.进入echarts初始页面调用 2.点击“日”调用
    function selectAlldata() {
        $.bc({
            url: "../api/Echarts/?year=1&month=1&type=allData", method: "Get", swal: false,
            callback: function (result) {
                var DataX = [];
                var DataY = [];
                result.map(function (element, index) {  //element代表每一个result
                    DataX.push(element.Age);
                    DataY.push(element.count);
                });
                DrawAllEcharts(DataX, DataY);
            }
        });
    };

    //通过年份获取信息
    function getDataByYear(year) {
        $.bc({
            url: "../api/Echarts/?year=" + year + "&month=1&type=clickYear", method: "Get", swal: false,
            callback: function (result) {
                var DataX = [];
                var DataY = [];
                result.map(function (element, index) {  //element代表每一个result
                    DataX.push(element.Month);
                    DataY.push(element.count);
                });
                DrawYearEcharts(DataX, DataY);
            }
        });
    }

    //通过月份获取信息
    function getDataByMonth(selectedYear, selectedMonth) {
        $.bc({
            url: "../api/Echarts/?year=" + selectedYear + "&month=" + selectedMonth + "&type=clickMonth", method: "Get", swal: false,
            callback: function (result) {
                var DataX = [];
                var DataY = [];
                result.map(function (element, index) {  //element代表每一个result
                    DataX.push(element.Day);
                    DataY.push(element.count);
                });
                DrawMonthEcharts(DataX, DataY);
            }
        });
    }

    //初始化echarts图，并且定义“年份”点击事件
    function DrawAllEcharts(xData, yData) {
        require.config({            // 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需的图表路径
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        require(
            [
                'echarts',
                'echarts/chart/line',//使用折线图就加载line模块，按需加载
                'echarts/chart/bar',
            ],
            function (ec) {
                //基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('echartsShow'));
                option.xAxis.name = "年份";
                option.xAxis.data = xData;
                option.series[0].data = yData;
                myChart.setOption(option);
                $('#echartsShow').resize(function () {
                    myChart.resize();
                })
                myChart.on('click', function (params) {
                    selYear = params.name;
                    setClick(selYear, selMonth);
                })
            })
    };

    //初始化echarts年份图，并且定义“月份”点击事件
    function DrawYearEcharts(xData, yData) {
        require.config({            // 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需的图表路径
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        require(
            [
                'echarts',
                'echarts/chart/line',//使用折线图就加载line模块，按需加载
                'echarts/chart/bar',
            ],
            function (ec) {
                //基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('echartsShow'));
                option.xAxis.name = "月份";
                option.xAxis.data = xData;
                option.series[0].data = yData;
                myChart.setOption(option);
                $('#echartsShow').resize(function () {
                    myChart.resize();
                })
                myChart.on('click', function (params) {
                    selMonth = params.name;
                    setClick(selYear, selMonth);
                })
            })
    };

    //初始化echarts月份图
    function DrawMonthEcharts(xData, yData) {
        require.config({            // 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需的图表路径
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        require(
            [
                'echarts',
                'echarts/chart/line',//使用折线图就加载line模块，按需加载
                'echarts/chart/bar',
            ],
            function (ec) {
                //基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('echartsShow'));
                option.xAxis.name = "日";
                option.xAxis.data = xData;
                option.series[0].data = yData;
                myChart.setOption(option);
                $('#echartsShow').resize(function () {
                    myChart.resize();
                });
                myChart.on('click', function (params) {
                    //回到最初状态
                    setClick();
                });
            })
    };

    //设置图表点击事件的处理
    function setClick(year, month) {
        if (level == 1)//year
        {
            clearInterval(yearFresh);
            getDataByYear(year);
            level = 2;
            monthFresh = setInterval(function () { getDataByYear(year) }, 4000);
        }
        else if (level == 2)//month
        {
            selYear = year;
            selMonth = month;
            clearInterval(monthFresh);
            getDataByMonth(selYear, selMonth);
            level = 3;
            dayFresh = setInterval(function () { getDataByMonth(year, month) }, 4000);
        }
        else if (level == 3)//day
        {
            clearInterval(dayFresh);
            selectAlldata();
            level = 1;
            yearFresh = setInterval(function () { selectAlldata(); }, 4000);
        }
    };

    $('.form_date').datetimepicker({
        language: 'zh-CN',
        weekStart: 1,
        todayBtn: 1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0,
        format: 'yyyy-mm-dd',
        pickerPosition: 'bottom-left'
    });
});